<script setup lang="ts">
import { CloseBold } from "@element-plus/icons-vue";
import SpecPrice from "~/components/SpecPrice.vue"
import Order from "./Order.vue";
import { ref, reactive, onBeforeMount, watch, computed } from "vue";
import { useRoute } from 'vue-router';
import service from "~/service";
const product = ref<HttpBkhc.Product>({
    name: '',
    code: '',
    brandList: [],
    specList: []
})

const brandCode = ref('')
const tableMaxHeight = ref(300)
const productPrice = ref<{ [key: string]: any }>({})
const list = reactive<{ id: string, spec: {}, price: string | number, quantity: number, goodsCode: string }[]>([])
const fileds = ref<string[]>([])
const total = ref(0)
const sequence = ref(0)
const route = useRoute()
const productCode = (route.query.code || '') as string
const isShowOrder = ref(false)
const isloadOrder = ref(false)

const brand = computed(() => {
    const bra = product.value.brandList.find(item => item.code === brandCode.value)
    return {
        productCode: product.value.code,
        productName: product.value.name,
        brandCode: bra?.code || '',
        brandName: bra?.name || ''
    }
})

onBeforeMount(async () => {
    tableMaxHeight.value = document.body.clientHeight - 242;
    if (productCode) {
        product.value = await service.product.getProductDetail(productCode);
        brandCode.value = product.value.brandList[0]?.code || '';
        if (brandCode.value) {
            const data = await service.product.getProductPricesByBrand({ productCode, brandCode: brandCode.value })
            productPrice.value[brandCode.value] = data
            fileds.value = product.value.specList.map(item => item.code)
            list.push({ id: `list_${sequence.value}`, spec: {}, price: '', quantity: 0, goodsCode: '' })
        }
    }
})

watch(list, (val) => {
    total.value = val.reduce((total: number, item) => {
        if (typeof item.price === 'number') {
            total = item.price * item.quantity + total
        }
        return total
    }, 0)
})

const handleAdd = () => {
    sequence.value++
    list.push({ id: `list_${sequence.value}`, spec: {}, price: '', quantity: 0, goodsCode: '' })
}

const handleDelete = (id: string) => {
    const index = list.findIndex(item => item.id === id)
    index > -1 && list.splice(index, 1)
}

const handleBrandCodeChange = async () => {
    if (!productPrice.value[brandCode.value]) {
        const data = await service.product.getProductPricesByBrand({ productCode, brandCode: brandCode.value })
        productPrice.value[brandCode.value] = data
    }
}

const handlePlaceOrder = () => {
    isloadOrder.value = true
    isShowOrder.value = true
}

const handleBack = () => {
    isShowOrder.value = false
}

</script>

<template>
    <div class="full-layout quote-price">
        <div v-show="!isShowOrder">
            <div class="title">{{ product.name }}报价</div>
            <div class="bar">
                <div class="label">品牌：</div>
                <el-radio-group v-model="brandCode" size="large" @change="handleBrandCodeChange">
                    <el-radio-button
                        v-for="brand in product.brandList"
                        :label="brand.code"
                        :key="brand.code"
                    >{{ brand.name }}</el-radio-button>
                </el-radio-group>
            </div>
            <div class="content">
                <div class="list">
                    <div class="header">
                        <div class="no cell"></div>
                        <div :style="{ flex: fileds.length, display: 'flex' }">
                            <div v-for="spec in product.specList" class="flex-cell">{{ spec.name }}</div>
                        </div>
                        <div class="quantity cell">数量</div>
                        <div class="item cell">单价</div>
                        <div class="item cell">总价</div>
                        <div class="oper cell">操作</div>
                    </div>
                    <div class="body">
                        <div v-for="(item, index) in list" :key="item.id" class="row">
                            <div class="no cell">{{ index + 1 }}</div>
                            <div :style="{ flex: fileds.length }">
                                {{ }}
                                <SpecPrice
                                    v-model:spec="item.spec"
                                    v-model:price="item.price"
                                    v-model:goodsCode="item.goodsCode"
                                    :fileds="fileds"
                                    :data="productPrice[brandCode]"
                                ></SpecPrice>
                            </div>
                            <div class="quantity cell">
                                <el-input-number
                                    v-model="item.quantity"
                                    :min="0"
                                    :controls="false"
                                    step-strictly
                                    class="input-number"
                                />
                            </div>
                            <div class="item cell">
                                <div class="text">{{ item.price === 'null' ? '无报价' : item.price }}</div>
                            </div>
                            <div class="item cell">
                                <div
                                    class="text"
                                >{{ typeof item.price === 'number' && item.quantity ? item.quantity * item.price : 0 }}</div>
                            </div>
                            <div class="oper cell">
                                <CloseBold class="icon" @click="handleDelete(item.id)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <el-button type="primary" @click="handleAdd">新 增</el-button>
                    <div class="total">
                        <span>总计：￥</span>
                        <span>{{ total }}</span>
                    </div>
                    <el-button type="primary" @click="handlePlaceOrder">确认下单</el-button>
                </div>
            </div>
        </div>
        <order v-if="isloadOrder" v-show="isShowOrder" :data="list" :specList="product.specList" :brand="brand" @back="handleBack"></order>
    </div>
</template>

<style lang="scss" scoped>
.quote-price {
    max-width: 1300px;
    margin: 0 auto;
    color: #5e5e5e;
    :deep(.el-input) {
        --el-input-text-color: #000000;
        --el-input-bg-color: #fff;
        --el-input-border-radius: 4px;
    }
    :deep(.el-button) {
        --el-border-radius-base: 4px;
    }
    :deep(.input-number .el-input__inner) {
        text-align: left;
    }
    .title {
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        color: #000;
        padding: 12px 0px 24px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
    }
    .bar {
        padding: 12px 0px;
        display: flex;
        align-items: center;
        .label {
            font-size: 18px;
        }
    }
    .content {
        .list {
            border-bottom: 1px solid #eeeeee;
            .no {
                width: 50px;
                text-align: center;
            }
            .oper {
                width: 60px;
            }
            .quantity {
                width: 120px;
            }
            .item {
                flex: 1;
            }
            .cell {
                padding: 4px;
                .text {
                    line-height: 32px;
                    height: 32px;
                    box-sizing: border-box;
                    border: 1px solid #dedfe6;
                    border-radius: 4px;
                    padding: 0px 11px;
                }
            }
            .flex-cell {
                padding: 4px;
                flex: 1;
            }
            .header {
                display: flex;
                height: 44px;
                background: #f5f6f6;
                align-items: center;
            }
            .body {
                .row {
                    display: flex;
                    align-items: center;
                }
            }
            .el-input-number {
                width: 100%;
            }
            .el-select {
                width: 100%;
            }
        }
        .icon {
            height: 24px;
            width: 24px;
            display: flex;
            color: #d81e06;
            cursor: pointer;
        }
        .bottom {
            display: flex;
            align-items: center;
            margin-top: 12px;
            .total {
                flex: auto;
                text-align: right;
                color: #fb5757;
                padding-right: 12px;
            }
        }
    }
}
</style>
